/**
 * 放大镜
 * @param radio 画布大小比例
 * @param color 颜色
 * @returns 数据地址
 */
const MagnifierImage = (radio?: number, color?: string) => {
    const r = radio || 1;
    const col = color || '#ffffff';
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 40 * r;
    const ctx = canvas.getContext('2d')!;

    ctx.strokeStyle = col;
    ctx.fillStyle = col;
    ctx.miterLimit = 4;
    ctx.scale(0.06, 0.06);
    ctx.translate(100 * r, 100 * r);
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(471.882 * r, 407.567 * r);
    ctx.lineTo(360.567 * r, 296.243 * r);
    ctx.bezierCurveTo(343.981 * r, 322.038 * r, 322.031 * r, 343.977 * r, 296.236 * r, 360.56399999999996 * r);
    ctx.lineTo(407.56 * r, 471.888 * r);
    ctx.bezierCurveTo(425.332 * r, 489.65599999999995 * r, 454.147 * r, 489.65599999999995 * r, 471.881 * r, 471.888 * r);
    ctx.bezierCurveTo(489.654 * r, 454.149 * r, 489.654 * r, 425.334 * r, 471.882 * r, 407.567 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(363.909 * r, 181.955 * r);
    ctx.bezierCurveTo(363.909 * r, 81.473 * r, 282.44 * r, 0, 181.956 * r, 0);
    ctx.bezierCurveTo(81.474 * r, 0, 0.001 * r, 81.473 * r, 0.001 * r, 181.955 * r);
    ctx.bezierCurveTo(0.001 * r, 282.437 * r, 81.474 * r, 363.906 * r, 181.95600000000002 * r, 363.906 * r);
    ctx.bezierCurveTo(282.44 * r, 363.906 * r, 363.909 * r, 282.437 * r, 363.909 * r, 181.955 * r);
    ctx.closePath();
    ctx.moveTo(181.956 * r, 318.416 * r);
    ctx.bezierCurveTo(106.704 * r, 318.416 * r, 45.490999999999985 * r, 257.20799999999997 * r, 45.490999999999985 * r, 181.956 * r);
    ctx.bezierCurveTo(45.490999999999985 * r, 106.704 * r, 106.70399999999998 * r, 45.490999999999985 * r, 181.956 * r, 45.490999999999985 * r);
    ctx.bezierCurveTo(257.206 * r, 45.490999999999985 * r, 318.424 * r, 106.70399999999998 * r, 318.424 * r, 181.956 * r);
    ctx.bezierCurveTo(318.424 * r, 257.208 * r, 257.206 * r, 318.416 * r, 181.956 * r, 318.416 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(75.817 * r, 181.955 * r);
    ctx.lineTo(106.139 * r, 181.955 * r);
    ctx.bezierCurveTo(106.139 * r, 140.15200000000002 * r, 140.153 * r, 106.14100000000002 * r, 181.95499999999998 * r, 106.14100000000002 * r);
    ctx.lineTo(181.95499999999998 * r, 75.816 * r);
    ctx.bezierCurveTo(123.438 * r, 75.816 * r, 75.817 * r, 123.437 * r, 75.817 * r, 181.955 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();

    return canvas.toDataURL('image/png');
}


export { MagnifierImage };